"use client"
import {motion, useInView, useScroll} from "framer-motion";
import Brain from "@/components/brain";
import React, {useRef} from "react";
import TimeLine from "@/components/timeLine";
import ScrollArrow from "@/components/scrollArrow";

const skills = [
  {
    id: 1,
    name: "JavaScript",
  },
  {
    id: 2,
    name: "TypeScript",
  },
  {
    id: 3,
    name: "React",
  },
  {
    id: 4,
    name: "Next.js",
  },
  {
    id: 5,
    name: "HTML5",
  },
  {
    id: 6,
    name: "CSS3",
  },
  {
    id: 7,
    name: "Tailwind CSS",
  },
  {
    id: 8,
    name: "Node.js",
  },
  {
    id: 9,
    name: "Express",
  },
  {
    id: 10,
    name: "MongoDB",
  },
  {
    id: 11,
    name: "Postman",
  },
  {
    id: 12,
    name: "Git",
  },
  {
    id: 13,
    name: "WebStorm",
  },
  {
    id: 14,
    name: "Visual Studio Code",
  },
];

const jobs = [
  {
    id: 1,
    title: "Web Developer",
    description: "I had the opportunity to contribute to a dynamic and innovative project, leveraging my skills in frontend and backend development to deliver high-quality solutions. Working remotely, I played a pivotal role in developing and enhancing key features of the platform, utilizing a stack comprising Typescript, Next.js, React, Node.js, Express, and MongoDB.",
    date: "02/2023 - 02/2024",
    company: "TradeLink",
    link: "https://tradelink.pro/",
  },
  {
    id: 2,
    title: "Computer Science",
    description: "In my journey as a software developer, I've honed my skills through hands-on experience, completing a total of 23 learning projects, including 4 collaborative endeavors.",
    date: "10/2021 - 08/2023",
    company: "School 21",
    link: "https://21-school.ru/",
  },
  {
    id: 3,
    title: "Senior Engineer Surveyor",
    description: "I have been involved in the construction of residential neighborhoods and sports complexes. Managed the geodesy department, interacted with engineers of contractor organizations, analyzed and prepared comments on design documentation, performed geodetic works. Worked with design documentation in AutoCAD and MS Office.",
    date: "07/2017 - 09/2021",
    company: "FODD",
    link: "http://www.fodd.ru/166.html",
  },
  {
    id: 4,
    title: "Survey Engineering",
    description: "I studied at the Faculty of Civil Engineering, Department of Engineering Geodesy and received a Master's degree. I defended my thesis on 'Observations of deformations of buildings and structures by trigonometric methods'.",
    date: "09/2012 - 06/2017",
    company: "Saint Petersburg Mining University",
    link: "https://en.spmi.ru/university",
  },
];

const AboutPage = () => {

  const containerRef = useRef()

  const {scrollYProgress} = useScroll({container: containerRef})

  const skillRef = useRef()
  // const isSkillRefInView = useInView(skillRef, {once: true})
  const isSkillRefInView = useInView(skillRef, {margin: "-100px"})

  return (
    <motion.div
      className="h-full"
      initial={{y: "-200vh"}}
      animate={{y: "0%"}}
      transition={{duration: 1}}
    >
      {/*CONTAINER*/}
      <div className="h-full overflow-scroll lg:flex" ref={containerRef}>
        {/*TEXT CONTAINER*/}
        <div className="flex flex-col gap-14 md:gap-22 lg:gap-38 xl:gap-54 lg:w-3/4 xl:1/2 ml-9 mr-9 lg:ml-20 lg:mr-20">
          {/*BIOGRAPHY CONTAINER*/}
          <div className="flex flex-col gap-8 justify-center" id="biography">
            {/*BIOGRAPHY TITLE*/}
            <h2 className="font-bold text-2xl">I am a Web Developer</h2>
            {/*BIOGRAPHY DESC*/}
            <p className="text-lg">
              My Computer Science foundation and experience in web development have equipped me with the skills to
              architect and implement digital solutions that marry functionality with aesthetics.
              <br/>
              Now, I stand at the precipice of my next chapter, eagerly seeking a position that will harness my
              expertise and passion for innovation. Open to relocation for office-based opportunities, I am poised to
              contribute my talents to dynamic teams around the world.
              <br/>
              How about we join forces and create something truly remarkable in collaboration?
            </p>
            {/*BIOGRAPHY SIGN SVG*/}
            <div className="self-end">
              <svg
                width="247"
                height="68"
                viewBox="0 0 247 68"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M170.924 13.9287C170.559 13.0481 168.659 7.79424 167.907 7.41574C164.506 5.70473 163.795 4.35076 160.101 3.99821C157.174 3.71888 153.966 3.54268 151.369 5.38329C149.171 6.94056 147.859 9.29358 146.443 11.6622C145.168 13.7929 145 15.7897 144.127 18.1864C143.405 20.169 143.273 21.2175 142.76 24.3051C142.246 27.3926 141.714 29.3658 142.043 31.7952C142.255 34.6406 143.941 39.9769 145.702 42.4887C148.05 45.8377 146.953 44.7666 150.157 47.5343C152.475 48.5578 153.136 48.8664 154.357 49.4257C156.113 49.4673 156.393 50.0019 158.113 49.5146C161.11 48.6653 161.439 48.6666 163.268 47.4115C164.242 46.7424 165.055 45.9205 165.995 45.2172C166.53 44.6767 168.175 42.2669 170.272 38.2482C170.561 37.7971 171.64 37.1153 172.563 36.171C174.377 34.3164 174.328 34.3187 176.494 34.2137C177.248 34.6512 178.018 35.5252 178.334 36.3059C178.876 37.6451 177.522 40.6598 177.174 42.5188C176.682 44.4333 176.578 46.2805 177.144 47.4218C178.11 48.63 179.742 48.7157 180.498 48.5142C182.861 47.8845 184.805 42.7305 185.74 38.9039M171.777 24.1653C171.595 25.9488 171.693 26.057 171.6 27.8578C171.502 29.7715 171.377 31.7017 171.107 33.5906C170.862 35.3 170.447 36.9602 170.162 38.6586C169.723 41.2716 169.528 43.9345 168.931 46.506C168.719 47.4178 168.375 48.3309 168.225 49.2548M56.3967 22.1011C56.2259 23.7667 56.3173 23.8677 56.2302 25.5494C56.1377 27.3366 56.0196 29.1392 55.7652 30.9032C55.535 32.4997 55.1454 34.0501 54.8773 35.6363C54.4649 38.0766 54.2808 40.5634 53.7198 42.965L53.7053 43.027C53.5028 43.8937 53.1349 45.4683 52.9971 46.3106M170.314 38.1007C170.327 37.9098 171.05 35.4793 171.145 35.3092C171.464 34.7371 173.089 30.439 173.376 29.8565C174.441 27.6944 173.844 29.1275 174.978 26.9925C175.554 25.9087 176.296 24.8795 177.785 24.5382C178.765 24.3136 179.116 23.9461 180.078 24.1021C181.039 24.2579 182.236 24.711 182.734 25.476C183.282 26.3179 182.976 25.6866 183.375 26.5853C183.642 27.1862 183.712 28.0235 183.478 28.6879M202.175 39.3673C202.52 38.4295 203.339 37.0594 204.262 36.1151C206.076 34.2604 207.232 33.935 208.501 34.4552C209.874 35.0186 210.025 35.7668 210.34 36.5475C210.882 37.8866 209.756 40.551 209.464 42.5527C209.172 44.5544 209.095 45.669 209.305 47.2627C209.763 49.0772 211.563 49.1602 212.319 48.9587C214.018 48.7309 216.811 40.9845 216.718 35.1232M188.027 28.5158C187.876 28.9142 187.765 29.2104 187.679 29.4485M187.679 29.4485C187.607 29.6463 187.553 29.804 187.506 29.9469M187.679 29.4485C187.885 28.8236 187.851 28.7918 188.145 28.2193C188.457 27.6103 188.698 26.9573 189.126 26.3295C189.536 25.7279 189.79 25.3011 190.178 24.8727C190.608 24.398 191.3 23.8487 192.024 23.6682C194.173 23.6609 195.032 24.7012 195.564 25.8611C195.94 26.6802 196.326 27.5228 196.466 28.419C196.639 29.5159 196.811 30.6162 196.865 31.723C196.997 34.3911 196.584 37.0438 196.246 39.7033C195.706 42.3527 195.072 44.8988 193.548 47.1865C192.71 48.1335 191.782 48.9619 190.47 49.0487C188.779 49.1604 186.967 48.3986 186.183 46.8542C185.596 45.6985 185.575 44.5444 185.518 43.2669C185.425 41.1991 185.602 39.1535 186.018 37.1237C186.473 34.9118 186.707 32.7489 187.372 30.3897C187.415 30.2382 187.456 30.1012 187.506 29.9469M187.679 29.4485C187.634 29.5833 187.579 29.7456 187.506 29.9469M197.856 24.0641C197.64 25.238 197.584 25.4831 197.309 26.8538C196.951 29.1082 196.996 31.3839 196.953 33.5124C196.912 35.6149 196.694 37.7135 196.384 39.7936C196.124 41.5278 195.983 43.5421 195.873 45.2963C195.786 46.6803 195.583 47.3464 196.135 48.6285C196.864 49.5627 196.899 49.2701 197.581 49.2371C199.146 48.2886 199.161 48.362 200.252 46.9261C200.769 46.2449 201.516 44.8287 201.739 43.4121C201.87 42.5816 202.028 42.3316 202.04 40.5858M202.699 24.217C202.559 32.271 201.85 46.6547 201.396 49.3429M202.159 39.0288C202.653 37.1627 202.738 36.7676 202.992 35.9286C203.534 34.1399 204.029 31.3756 204.779 29.7395C205.528 28.1034 205.736 27.5924 206.288 26.6608C206.567 26.1899 208.196 24.7824 208.734 24.7485C210.135 24.6601 210.332 24.197 211.735 25.1847C213.013 26.7062 212.037 25.3639 212.713 26.2037C213.389 27.0435 213.146 29.0429 212.726 29.737M217.461 24.4222C216.824 27.3617 216.504 30.7707 216.782 36.429C216.97 40.2496 216.867 39.1396 217.617 43.4662C218.9 46.7004 218.505 46.6226 220.896 48.5427C222.24 49.0593 223.37 49.1984 225.292 47.5539C227.464 45.4195 228.096 41.662 228.29 39.2991M228.29 39.2991C228.388 38.1056 228.375 37.2678 228.391 37.1749C228.429 36.5509 228.511 34.8611 228.604 32.9079M228.29 39.2991C228.372 37.2197 228.488 34.9914 228.604 32.9079M228.29 39.2991C228.212 41.2891 228.164 43.1427 228.175 44.6024C227.852 47.963 228.172 50.8786 228.251 53.0823C228.291 54.2007 228.274 55.3111 228.214 57.3985C228.154 59.486 228.19 59.7751 228.049 60.8969C227.909 62.0186 227.825 63.2831 225.7 65.7616C223.467 67.0333 222.697 67.2646 220.668 66.7328C219.233 66.3566 218.184 65.8837 217.412 65.097C215.96 63.6161 214.948 61.6776 214.796 60.57M228.604 32.9079C228.809 28.6559 229.069 23.1554 229.051 24.6843C229.039 25.6758 228.82 29.0425 228.604 32.9079ZM231.885 23.5365C231.833 24.3405 231.874 25.1225 231.908 25.9263C232.005 28.1947 231.843 30.2694 231.515 32.8528C231.386 34.8353 231.258 35.8839 231.147 37.5769C231.069 38.7779 230.797 40.3977 230.469 41.5688C230.206 42.5066 230.145 43.2818 229.969 44.3465C229.778 45.5058 229.603 46.1331 229.268 46.9594M231.469 33.5645C231.923 33.0772 233.476 33.1095 234.758 32.7063C236.361 32.2022 236.963 32.0984 237.861 31.7519C238.827 31.3791 239.359 30.8803 240.044 29.9695C240.814 28.946 241.593 27.312 241.857 26.0459C241.993 25.3907 242.089 24.6683 242.315 24.0384C242.343 23.781 242.354 23.6107 242.369 23.3743M242.35 23.4243C242.278 24.5235 242.138 25.6047 241.954 26.6944C241.494 29.4066 241.143 32.1082 240.964 34.8458L240.579 40.75C240.458 42.6026 240.151 43.2781 240.169 45.1358C240.173 45.5073 240.205 45.8612 240.862 46.508C241.393 46.7497 242.36 46.5431 242.924 46.408C244.227 46.0958 245.165 45.327 246 44.5137M1 41.8521C1.27517 44.4646 0.901661 47.6599 4.06124 48.4697C7.17792 49.2685 10.1607 45.682 12.2846 42.8642C13.975 40.6216 15.6135 38.3154 17.2789 36.0428M17.2789 36.0428C18.037 35.0083 18.8007 33.9808 19.5774 32.9694L19.678 32.7803C19.7316 32.6796 19.7839 32.5812 19.835 32.4851M17.2789 36.0428C15.9391 36.1737 14.5246 36.264 12.9884 36.3254C11.6988 36.377 8.46042 35.6327 7.93851 33.9613C7.72188 33.2675 7.72088 32.5175 8.9485 30.6643C9.52387 29.884 9.83152 29.7489 11.1013 29.5745C12.9015 29.6 15.3151 30.0075 18.0624 31.2404C18.499 31.4853 19.1398 31.9334 19.835 32.4851M17.2789 36.0428C19.1754 35.8576 20.9222 35.5909 22.6522 35.2092M19.835 32.4851C21.5231 29.3101 21.906 28.5484 23.1203 24.8385C24.1883 21.5757 25.1453 18.002 26.2216 14.4109C26.9987 12.3372 27.329 11.0123 27.9433 8.70409C28.4792 6.69053 28.8747 3.8112 29.1821 1.95071C29.3026 1.22115 29.4774 0.941147 29.775 1.01013C30.1603 1.09946 30.0471 3.83261 30.0603 4.1018C30.5422 13.8879 29.4024 23.6591 28.6206 33.435M19.835 32.4851C20.6595 33.1395 21.5605 33.9397 22.288 34.7198C22.4158 34.8913 22.5369 35.0539 22.6522 35.2092M28.6206 33.435C28.3376 36.975 28.1014 40.5155 28.0063 44.0576C27.9693 45.4346 27.7533 47.5057 27.8195 48.8492C27.8634 49.7409 27.4734 47.4675 27.4486 47.3356C26.9475 44.6685 26.7958 42.237 25.5688 39.8447C24.5027 37.7662 23.9509 36.9585 22.6522 35.2092M28.6206 33.435C26.526 34.204 24.5997 34.7795 22.6522 35.2092M28.6206 33.435C29.4684 33.1237 30.3438 32.7808 31.2594 32.4029C35.9447 29.3464 39.0465 24.8815 41.327 20.6019M41.3757 20.5995C39.2473 23.9992 37.8663 26.8003 36.7924 30.0617C34.7654 36.2178 33.6204 42.5477 31.976 48.7752C31.0372 52.3308 30.5728 55.9939 29.2902 59.4839C28.366 61.9986 26.9549 65.6481 24.1027 66.618M32.0811 48.1005C34.7367 37.5492 35.3878 34.8998 35.8108 33.5704C35.9988 32.9796 36.2381 32.4347 37.0542 31.0465C39.7586 26.4467 41.9394 22.3435 45.3087 22.1055C47.3587 21.9607 50.0305 24.4043 49.2088 26.9095C47.7223 31.4415 48.3259 29.8125 46.8905 34.3905C45.4551 38.9685 43.7094 42.2042 43.8023 44.0903C43.8952 45.9764 45.352 45.9349 46.4922 46.1413C49.4493 46.6766 49.7225 44.288 52.0007 41.9475C53.8771 37.3966 55.1023 35.4951 55.9528 28.9579M82.385 35.5049C86.6267 33.0939 86.4577 34.3544 91.7916 33.6189C95.1852 33.151 96.5267 32.5652 97.9082 31.3832C100.184 28.8888 100.456 27.0584 99.7316 25.2352C99.0076 23.4119 98.1343 22.5824 95.0246 21.8987C92.3761 21.7581 93.7236 21.6936 90.7259 22.1072C87.7282 22.5208 85.4612 24.834 84.5801 27.0364C83.7029 29.229 83.512 30.4499 82.7585 32.6996C81.9844 35.0109 81.5456 40.6241 82.76 43.1221C83.9744 45.6202 87.8322 46.2696 90.5031 46.1401C92.0816 46.0635 96.2045 45.8636 99.3028 42.3199M100.983 16.9161C97.8751 21.2305 91.2997 13.9356 87.3226 19.244M99.3052 42.3683C99.1319 44.8005 99.6544 46.278 101.74 46.1769C105.248 46.0067 107.125 42.8953 108.183 40.1441C110.252 34.7697 109.079 37.8848 110.789 32.5522C111.263 31.0762 111.711 28.7575 112.099 26.5478M112.099 26.5478C112.339 25.1814 112.556 23.8566 112.742 22.7985M112.099 26.5478C112.309 25.0084 112.526 23.7915 112.742 22.7985M112.099 26.5478C111.88 28.1512 111.667 30.1045 111.472 32.5191C111.168 36.2667 110.936 38.5078 111.405 42.0724C112.013 44.5152 112.687 45.3081 114.697 45.4516C116.315 45.567 118.185 41.889 119.597 36.8274C119.912 35.6982 121.273 30.2017 121.76 28.1905C122.2 26.3755 121.957 27.2114 122.62 25.0463M112.742 22.7985C113.007 21.286 113.21 20.3182 113.325 20.5524C113.136 21.1632 112.939 21.8864 112.742 22.7985ZM122.62 25.0463C122.921 24.0645 123.141 22.955 123.328 22.0723M122.62 25.0463C122.896 23.8647 123.148 22.8171 123.328 22.0723M122.62 25.0463C121.864 28.2819 120.927 32.5216 120.791 34.2972C120.581 37.0492 120.354 39.7963 121.167 41.9383C121.836 43.6995 122.203 44.1181 123.322 45.0333C124.299 45.8311 125.338 46.2929 127.21 45.6204C128.506 45.1548 129.487 44.2496 129.994 42.6253M123.328 22.0723C123.426 21.6119 123.515 21.2133 123.601 20.9266C123.63 20.8296 123.52 21.2794 123.328 22.0723ZM55.0476 34.3828C55.3636 32.8646 55.5709 32.2928 55.745 31.6827C55.9953 30.8059 56.1393 30.1382 56.5007 29.1737C56.8893 28.1368 57.1281 27.8063 57.4264 27.1413C57.7684 26.3791 58.4834 25.3658 58.7929 24.6006C59.2254 23.5311 60.1311 22.9482 61.1729 22.4568C62.0631 22.0369 63.7203 22.1094 64.3507 22.7951C65.2846 23.8111 65.6437 24.885 65.7588 26.207C65.8608 27.3776 65.9491 26.9211 66.1542 29.217C66.2043 30.2345 66.2117 31.0311 66.1127 31.713M66.1127 31.713C66.1064 31.7566 66.0996 31.7997 66.0924 31.8423C66.0158 32.2955 65.9495 32.8892 65.8556 33.4363C65.8389 33.5335 65.8249 33.624 65.813 33.7096M66.1127 31.713C65.94 32.3385 65.8278 33.0012 65.813 33.7096M66.1127 31.713C66.5376 30.1739 67.3291 28.8603 67.9388 27.6483C68.3924 26.7464 69.3536 25.3622 69.9883 24.8263C70.6767 24.2451 71.3328 23.2691 72.7462 22.8841C73.7802 22.834 73.9882 22.8691 74.6903 23.1063C75.7048 23.5997 76.0935 24.4973 76.1371 25.3835C76.209 26.8428 76.0937 27.165 75.9427 28.4298C75.5971 31.3227 74.7797 34.1149 74.4775 36.9958C74.3131 38.5627 74.0069 40.1288 73.9078 41.6881C73.8459 42.6624 74.0601 44.9628 74.8998 45.5728C75.6187 46.0951 77.1192 46.1439 78.1092 45.4172C79.2343 44.4566 79.3958 43.7701 80.009 42.3345C80.4665 40.7126 80.5057 40.5167 80.7896 39.3395C81.6619 37.2127 81.2934 37.6669 82.4557 35.4775M65.813 33.7096C65.6965 34.5474 65.7812 34.9187 65.5224 36.5721C65.3284 38.2996 65.1668 38.8866 65.0054 39.9429C64.976 40.1351 64.9412 40.363 64.9024 40.6168M65.813 33.7096C65.7804 35.2719 65.4678 37.4025 65.2366 38.9486C65.157 39.4807 65.0137 40.0529 64.9024 40.6168M64.9024 40.6168C64.8605 40.8915 64.814 41.1964 64.7649 41.5188M64.9024 40.6168C64.8421 40.9224 64.7912 41.2257 64.7649 41.5188M64.7649 41.5188C64.6548 42.2414 64.5316 43.0521 64.4174 43.8082M64.7649 41.5188C64.7575 41.6013 64.752 41.683 64.7488 41.7638C64.6473 42.5238 64.5281 43.1808 64.4174 43.8082M64.4174 43.8082C64.3084 44.5306 64.2076 45.2032 64.1343 45.7017M64.4174 43.8082C64.3053 44.4443 64.2018 45.05 64.1343 45.7017M64.1343 45.7017C64.0083 46.5585 63.9637 46.9008 64.0984 46.0966C64.1088 45.9628 64.1208 45.8313 64.1343 45.7017Z"
                  stroke="black"
                  strokeWidth="1"
                />
              </svg>
            </div>
            {/*BIOGRAPHY SCROLL SVG*/}
            <ScrollArrow href="#skills" className=""/>
          </div>
          {/*SKILLS CONTAINER*/}
          <div className="flex flex-col gap-12 justify-center" ref={skillRef} id="skills">
            {/*SKILL TITLE*/}
            <motion.h2
              initial={{x: "-300px"}}
              animate={isSkillRefInView ? {x: 0} : {}}
              transition={{delay: 0.2}}
              className="font-bold text-2xl"
            >
              Skills
            </motion.h2>
            {/*SKILL LIST*/}
            <motion.div
              initial={{x: "-900px"}}
              animate={isSkillRefInView ? {x: 0} : {}}
              transition={{delay: 0.2}}
              className="flex gap-4 flex-wrap"
            >
              {skills.map(skill => (
                <div
                  className="rounded p-2 text-sm cursor-pointer transition ease-in-out duration-300 bg-black text-white hover:bg-white hover:text-black"
                  key={skill.id}
                >
                  {skill.name}
                </div>
              ))}
            </motion.div>
            {/*SKILL SCROLL SVG*/}
            <ScrollArrow href="#experience"/>
          </div>
          {/*EXPERIENCE CONTAINER*/}
          <TimeLine title="Experience and Education" divId="experience" items={jobs}/>
          <ScrollArrow href="#biography" className="rotate-180"/>
        </div>
        {/*SVG CONTAINER*/
        }
        <div className="hidden lg:block w-1/3 sticky top-0 z-30 xl:1/2">
          <Brain scrollYProgress={scrollYProgress}/>
        </div>
      </div>
    </motion.div>
  );
};

export default AboutPage;
